<template>
	<view class="pay">
		<view class="order-detail">
			<!-- <view class="name">{{ info.name }}</view> -->
			<view class="price"> ￥{{ info.price }} </view>
			<image :src="info.image" class="orderImg" mode="aspectFill"></image>
			<!-- <image :src="info.image" class="orderImg radius-20" mode="aspectFill"></image> -->
			<!-- <view class="white mb-60 size-30">
				订单号：{{info.order_num}}
			</view>
			<view class="white mt-60 size-30">
				下单时间：{{info.create_time}}
			</view> -->
		</view>
		<!-- 支付 -->
		<!-- app环境 -->
		<view class="plr-40 mt-100">
			<view class="white bold size-30 text-center">
				<view class="">订单编号 </view>
				<view class="flex-center" @click="copyAddress(info.order_num)">
					<view class="">{{info.order_num}}</view>
					<view class="">
						<image class="copyImg ml-20" src="/static/copy.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="white bold size-30 text-center">
				<view class="">付款剩余时间 </view>
				<view class="">
					<u-count-down @end='finishTime' :timestamp="info.cancel_time"></u-count-down>
				</view>
			</view>
			<view class="white bold size-30 text-center" style="border-bottom: 2rpx solid #EBEBEB;"> 请选择支付方式 </view>
			<view class="">
				<view @click="current = item.value" class="flex pt-30 pb-30 flex-between"
					style="border-bottom: 2rpx solid #EBEBEB;" v-for="(item, index) in list" :key="item.value">
					<view class="flex white">
						<image :src="item.image" class="payIcon mr-20" mode=""></image>
						<view>{{ item.name }}<text v-if="item.value == 0"
								class="size-26 gold">（{{ userAccount }})</text></view>
					</view>
					<image src="/static/select-pink.png" mode="" v-if="current == item.value"
						style="width: 32rpx;height: 32rpx;"></image>
					<image src="/static/selects.png" mode="" v-else style="width: 32rpx;height: 32rpx;"></image>
				</view>
			</view>
		</view>
		<view class="pr-30 pl-30 mt-100">
			<u-button hover-class="none" @click="payConfirm = true" class="payBtn">确认支付</u-button>
		</view>
		<!-- 支付密码弹窗 S -->
		<u-popup v-model="showPassword" width="90%" mode="center" border-radius="16" @close="closePassword">
			<view class="pl-30 pr-30 pt-30 pb-30">
				<view class="text-center mb-20 size-26">请输入密码</view>
				<u-message-input disabled-keyboard :maxlength="6" :dot-fill="true" :value="password"></u-message-input>

				<!-- <u-button class="mt-20">支付</u-button> -->
			</view>
		</u-popup>
		<u-keyboard ref="uKeyboard" :mask-close-able="false" :confirm-btn="false" :show-tips="false" @cancel="cancelKey"
			@backspace="backspace" @change="changePassword" :mask="false" v-model="keyShow" :dot-enabled="false">
		</u-keyboard>
		<!-- 支付密码弹窗 E -->

		<view class="pay-confirm" v-show="payConfirm">
			<view class="pay-confirm-centent">
				<image class="cancel-btn" src="/static/close-001.png" @click="payConfirm = false"></image>
				<view class="title">
					购买须知
				</view>
				<view class="message">
					购买成功后，您的支付款将直接转至卖家账户
				</view>
				<button class="confirm-btn" @click="payConfirm = false; affirmPay()">
					继续支付
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	const module = uni.requireNativePlugin('SandPayTypeModule')
	// #endif

	export default {
		data() {
			return {
				userAccount: 0,
				list: [
					// {
					// 	value: '0',
					// 	name: '余额支付',
					// 	image: '/static/yue.png'
					// },
					// #ifdef H5
					{
						name: '杉德',
						value: 7,
						image: '/static/sahnde.png'
					},
					// #endif
					// #ifdef APP-PLUS
					// {
					// 	name:'杉德',
					// 	value:8,
					// 	image:'/static/sahnde.png'
					// },
					// #endif
					// {
					//   value: '1',
					//   name: '支付宝',
					// 	image:'/static/zhifubao.png'
					// },
					// {
					//   value: '2',
					//   name: '微信',
					// 	image:'/static/weixin.png'
					// }
				],
				current: 7,
				info: {},
				isWx: false,
				btnDisabled: false,
				config_appid: '',
				id: '',
				password: '',
				showPassword: false, //密码弹框
				keyShow: false,

				payConfirm: false,
			}
		},
		onLoad(options) {
			this.id = options.order_id
			this.$http('api/orders/goodsOrderDetail', {
				id: this.id,
			}).then(res => {
				this.info = res
				this.info.cancel_time = Date.parse(this.info.cancel_time) / 1000 - Date.parse(new Date()) / 1000
			})
		},
		onShow() {
			this.$http('api/account/account').then(res => {
				this.userAccount = res.account
			})
			this.$http('api/login/serverConfig').then(res => {
				this.config_appid = res.wx_global_app_id
			})
			// #ifdef H5
			// 判断是否为微信环境
			let ua = navigator.userAgent.toLowerCase()
			let url = window.location.href
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				if (url.indexOf('code') != -1) {
					let code = url.split('?')[1].split('&')[0].split('=')[1]
					this.$http(
						'api/user/auth', {
							code: code,
						},
						'POST'
					).then(res => {})
				}
				this.isWx = true
			} else {
				this.isWx = false
			}
			// #endif
		},
		methods: {
			finishTime() {
				uni.redirectTo({
					url: '/pages/my/myOrder'
				})
			},
			// 复制
			copyAddress(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.hideToast()
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功',
									icon: 'none'
								})
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				let that = this;
				this.$copyText(val).then(function(e) {
					uni.showToast({
						title: "复制成功!",
						icon: "none"
					})
				}, function(e) {
					uni.showToast({
						title: "复制失败!",
						icon: "none"
					})
				})
				// #endif
			},
			confirmKey() {
				console.log(e);
			},
			closePassword() {
				console.log('00');
			},
			backspace() {
				this.password = this.password.substring(0, this.password.length - 1)
			},
			//取消输入
			cancelKey() {
				this.password = ''
				this.showPassword = false
			},
			changePassword(e) {
				if (this.password.length < 6) {
					this.password += e
					if (this.password.length == 6) {
						this.keyShow = false
						this.showPassword = false
						this.toPay()
					}
				} else {
					this.keyShow = false
					this.showPassword = false
				}

			},
			radioChange(e) {
				this.current = e.detail.value
			},
			affirmPay() {
				if (this.current == 0) {
					if (this.userAccount < this.info.price) return uni.showToast({
						title: '余额不足，请充值',
						icon: 'none'
					})
					this.showPassword = true
					this.keyShow = true
				} else {
					this.toPay()
				}
			},
			toPay() {
				let _this = this
				if (this.current == -1) {
					uni.showToast({
						title: '请选择支付方式!',
						icon: 'none',
					})
					return
				}
				this.btnDisabled = true
				// 余额抵扣
				if (this.current == 0) {
					// H5环境
					this.$http('api/orders/goodsPay', {
						id: this.id,
						pay_type: 1,
						password: this.password
					}).then(res => {
						this.password = ''
						this.btnDisabled = false
						this.buyShow = false
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/my/index'
							})
						}, 800)
					}).catch(() => {
						this.password = ''
					})
				} else if (this.current == 7) {
					this.$http('api/orders/goodsPay', {
						id: this.id,
						pay_type: this.current
					}).then(res => {
						// #ifdef H5
						// console.log(res.pay, 1111111111111111111)
						// location.href = this.$url + 'index/index/pay?order_num=' + res.order_num
						location.href = res.pay.data.url
						// location.href = this.$url + 'index/index/pay?order_num=' + res.data.data
						// #endif
						// #ifdef APP-PLUS
						if (plus.os.name.toLowerCase() == 'ios') {
							plus.runtime.openURL(res.pay)
						} else {
							uni.setStorageSync('payUrl', res.pay)
							uni.navigateTo({
								url: '/pages/pay/web'
							})
						}
						// #endif
						this.btnDisabled = false
						this.buyShow = false

					}).catch(() => {

					})
				} else if (this.current == 8) {
					this.$http('api/orders/goodsPay', {
						id: this.id,
						pay_type: this.current
					}).then(res => {
						module.cashierPayMulti(res.pay, (res) => {
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my/index'
								})
							}, 800)
						})

					}).catch(() => {

					})


				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-countdown-colon {
		color: #FFFFFF !important;
	}

	/deep/.u-countdown-item {
		background-color: #000 !important;
	}

	/deep/.u-countdown-time {
		color: #FFFFFF !important;
		background-color: #000 !important;
		border: none !important;
	}

	.flex-center {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.copyImg {
		width: 24rpx;
		height: 24rpx;
		filter: brightness(0.5);
	}

	.text-center {
		text-align: left;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pay {
		width: 100%;
		min-height: calc(100vh - calc(44px + env(safe-area-inset-top)));
		background: RGBA(21, 21, 32, 1);
		box-sizing: border-box;
		padding-bottom: 100rpx;
	}

	.order-detail {
		padding: 90rpx 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		.price {
			font-size: 84rpx;
			font-weight: bold;
			color: #FFFFFF;
		}

		.orderImg {
			width: 400rpx;
			height: 300rpx;
			margin-top: 100rpx;
		}
	}

	.white {
		color: #FFFFFF;
	}

	.gold {
		color: #999999;
	}

	.payBtn {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
		height: 88rpx !important;
		background: linear-gradient(90deg, RGBA(194, 115, 227, 1), RGBA(149, 37, 246, 1));
		border-radius: 44px;

		&::after {
			border: none;
		}
	}

	.payIcon {
		width: 48rpx;
		height: 48rpx;
	}

	.orderImg {
		width: 200rpx;
		display: block;
		margin: 0 auto;
		height: 200rpx;
	}

	.pay-confirm {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		background: rgba(0, 0, 0, .5);
		width: 100%;
		height: 100vh;

		.pay-confirm-centent {
			width: 691rpx;
			height: 365rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: 50% auto 0;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			padding: 20rpx 0;

			.cancel-btn {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				width: 36rpx;
				height: 36rpx;
			}

			.title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}

			.message {
				font-size: 24rpx;
				font-weight: 400;
				color: #848484;
			}

			.confirm-btn {
				min-width: 400rpx;
				height: 90rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				background: linear-gradient(90deg, RGBA(194, 115, 227, 1), RGBA(149, 37, 246, 1));
				border-radius: 45px;
			}
		}
	}
</style>
